<template>
  <div class="life">
    <div class="life-header">
      <div class="life-header-left" ><el-icon><Pouring /></el-icon>Seize every moment of life, you will find that life is really wonderful</div>
      <el-col :span="2" :xs="4" class="life-header-right" @click="lifeDetailBack">
        <el-icon><ArrowRight /></el-icon>
      </el-col>
    </div>
    <div class="life-content">

        <div class="life-content-title">{{title}}</div>
        <div class="life-content-text" style="color: #73767a; font-size: 16px; font-family:KaiTi;" v-html="content"></div>
        <div class="life-content-time">{{formatUTC(time)}}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { getLifeById } from '@/service/blog/life'
import { formatUTC } from '@/utils/format'
import { ref } from 'vue';
const route = useRoute()
const router = useRouter()

const lifeId = route.params.id
const title = ref<string>()
const content = ref<string>()
const time = ref<string>('time')
getLifeById(lifeId).then(res => {
  // console.log(res)
  title.value = res.title
  content.value = res.content
  time.value = res.createAt
})

function lifeDetailBack() {
  router.back()
}
</script>

<style lang="less" scoped>
.life {
  padding: 20px;
  .life-header {
    padding: 5px;
    border-bottom: 1px solid rgb(70, 69, 69);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1039dc;
    .life-header-left {
      display: flex;
      align-items: center;
    }
    .life-header-right {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 14px;
      color: #d84040;
      font-size: 20px;
      &:hover {
        cursor: pointer;
        color: #409EFF;
      }
    }
  }
  .life-content {
    padding: 20px;
    .life-content-title {
      text-align: center;
      font-size: 18px;
    }
    .life-content-text {
      padding: 20px 0;
    }
    .life-content-time {
      font-size: 12px;
      text-align: end;
      color: #73767a;
      margin: 15px 0;
    }
  }
}
</style>